<template>
  <div class="box regBox">
    <van-nav-bar
      title="注册"
      right-text="去登录"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        placeholder="用户名"
        :right-icon="unTest"
      />
      <van-field
        v-model="tel"
        name="tel"
        placeholder="手机号"
        :right-icon="telTest"
      />
      <van-field
        v-model="sms"
        clearable
        name="sms"
        placeholder="请输入短信验证码"
        :right-icon="smsTest"
      >
        <template #button>
          <van-button size="small" type="primary" :disabled="telSms" @click="onSendSms">{{smsTitle}}</van-button>
        </template>
      </van-field>
      <van-field
        v-model="password"
        type="password"
        name="password"
        placeholder="密码"
        :right-icon="pwTest"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" :disabled="allTest">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Button, Toast } from 'vant'
import { sendSms, register } from '@/api/request.js'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)

export default {
  data () {
    return {
      username: '',
      password: '',
      tel: '',
      sms: '',
      smsTitle: '发送验证码'
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      this.$router.push('/login')
    },
    onSendSms () {
      // 设置发送验证码间隔事件
      let time = 10
      // 修改按钮的提示文字
      this.smsTitle = time + 's后重新发送'
      // 开启计时器
      const t = setInterval(() => {
        // 判断时间是否走完
        if (time === 1) {
          // 清除计时器
          clearInterval(t)
          // 修改按钮文字
          this.smsTitle = '发送验证码'
        } else {
          // 一秒减1
          time--
          // 修改按钮文字
          this.smsTitle = time + 's后重新发送'
        }
      }, 1000)
      sendSms({
        tel: Number(this.tel)
      }).then(data => {
        switch (data.data.code) {
          case 200:
            Toast('验证码发送成功')
            break
          case 201:
            Toast('验证码再次发送成功')
            break
          case 202:
            Toast('手机号已被注册')
            break
          case 203:
            Toast(data.data.title)
            break
        }
      })
    },
    onSubmit (v) {
      const that = this
      // console.log(this.username)
      // console.log(v)
      register({
        username: v.username,
        password: v.password,
        tel: v.tel,
        code: v.sms
      }).then(data => {
        // console.log(data.data)
        switch (data.data.code) {
          case 200:
            Toast({
              message: '注册成功',
              onClose () {
                that.$router.push('/login')
              }
            })
            break
          case 201:
            Toast('用户名重复')
            break
          case 202:
            Toast('请先发送验证码')
            break
          case 203:
            Toast('手机号已被注册')
            break
          case 204:
            Toast('用户名已被注册')
            break
        }
      })
    }
  },
  computed: {
    allTest () {
      return this.unTest === '' || this.pwTest === '' || this.telTest === '' || this.smsTest === ''
    },
    unTest () {
      if (/^.{1,10}$/.test(this.username)) {
        return 'success'
      }
      return ''
    },
    pwTest () {
      if (/^.{1,10}$/.test(this.password)) {
        return 'success'
      } else {
        return ''
      }
    },
    telTest () {
      if (/^1[3-9]\d{9}$/.test(this.tel)) {
        return 'success'
      }
      return ''
    },
    smsTest () {
      if (/^\d{6}$/.test(this.sms)) {
        return 'success'
      }
      return ''
    },
    telSms () {
      // 发送验证码是否可点,根据是否输入手机号和当前按钮内容 设置
      return this.telTest === '' || this.smsTitle !== '发送验证码'
    }
  }
}
</script>
